<%= page do %>
  <%= page_header do %>
    <%= page_header_back(solidus_admin.users_path) %>
    <%= page_header_title(t(".title", email: @user.email, amount: @store_credit.display_amount)) %>
  <% end %>

  <%= page_header do %>
    <%= render component("users/edit/tabs").new(user: @user, current: :store_credits) %>
  <% end %>

  <%= page_with_sidebar do %>
    <%= page_with_sidebar_main do %>
      <%= render component('ui/panel').new(title: t(".store_credit")) do |panel| %>
        <% panel.with_section do %>
          <%= render component('ui/details_list').new(
            items: [
              { label: t('.credited'), value: @store_credit.display_amount },
              { label: t('.created_by'), value: @store_credit.created_by_email },
              { label: t('.type'), value: @store_credit.category_name },
              { label: t('.memo'), value: @store_credit.memo }
            ]
          ) %>
        <% end %>

        <% panel.with_section do %>
          <div class="w-[100%] text-right">
            <% if @store_credit.invalidateable? %>
              <%= render component("ui/button").new(
                tag: :a,
                scheme: :danger,
                data: {
                  turbo_frame: :resource_form
                },
                href: edit_validity_url,
                text: t(".invalidate"),
              ) %>
            <% end %>

            <%= render component("ui/button").new(
              tag: :a,
              data: {
                turbo_frame: :resource_form
              },
              href: edit_memo_url,
              text: t(".edit_memo"),
            ) %>

            <% if @store_credit.editable? %>
              <%= render component("ui/button").new(
                tag: :a,
                data: {
                  turbo_frame: :resource_form
                },
                href: edit_amount_url,
                text: t(".edit_amount"),
              ) %>
            <% end %>
          </div>
        <% end %>
      <% end %>

      <% if @events.present? %>
        <h1 class="font-semibold text-base text-center w-[100%]"><%= t(".store_credit_history") %></h1>
        <%= render component('ui/table').new(
          id: stimulus_id,
          data: {
            class: event_model_class,
            rows: @events,
            columns: columns,
          },
        )%>
      <% end %>
    <% end %>

    <%= page_with_sidebar_aside do %>
      <%= render component("users/stats").new(user: @user) %>
    <% end %>
  <% end %>

  <%= turbo_frame_tag :resource_form, target: "_top" %>
<% end %>
